<template>
	<view class="container position-relative">
		<!-- <cover-view>
			<view @click="toBack" class="goBack flex justify-center align-center round">
				<view class="cuIcon-back lg text-white"></view>
			</view>
		</cover-view> -->

		<live-player :src="info.pullRtmpUrl" autoplay @statechange="statechange" @error="error"
			style="width: 100vw; height: 100vh;" />
		<!-- <image :src="baseUrl + '/static/live_bg.png'" mode=""
			style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100vw;height: 100vh;z-index: -1;">
		</image> -->
		<view class="my_header flex justify-start align-center round">
			<image :src="info.headImg" mode="" class="round"></image>
			<view class="margin-left-xs text-white">
				<view class="text-cut">
					{{info.nickName}}
				</view>
				<view class="text-cut">
					{{num}}人在看
				</view>
			</view>
		</view>
		<!-- <view class="refresh flex justify-center align-center round">
			<view class="cuIcon-refresh xl text-white"></view>
			
		</view> -->
		<!-- <image @click="switchCamera" class="refresh round" :src="baseUrl + '/static/flip.png'" mode=""></image> -->
		<view class="l_fooder padding">
			<!-- <lff-barrage ref="lffBarrage" type="leftBottom"></lff-barrage> -->
			<scroll-view scroll-y="true" style="width: 520rpx;height: 270rpx;" scroll-with-animation
				:scroll-into-view="scrollInToView">
				<view :id="'item' + item.id"
					class="flex justify-start align-start text-df round padding-sm margin-bottom-xs"
					v-for="item in messageList" style="background-color: rgba(0,0,0,.2);">
					<text class="color">{{item.nickName}}：</text>
					<text class="text-white">{{item.context}}</text>
				</view>
			</scroll-view>
			<view class="flex justify-between align-center">
				<view class="flex justify-center align-center" style="height: 78rpx;">
					<input type="text" v-model="context" class="text-15 f-grow1 text-white" value=""
						placeholder="说点什么..." />
					<button
						class="bg-color text-white text-15 padding-left padding-right padding-top-xs padding-bottom-xs margin-left-sm round"
						@click.stop="submitMessage">发送</button>
				</view>
				<view class="flex justify-start align-center">
					<image @click="onShare" :src="baseUrl + '/static/share4.png'" mode="" class="round"
						style="width: 78rpx;height: 78rpx;min-width: 78rpx;"></image>
					<image @click="toBack" :src="baseUrl + '/static/close.png'" mode="" class="round margin-left-xs"
						style="width: 78rpx;height: 78rpx;min-width: 78rpx;"></image>
				</view>
			</view>

		</view>
		<view @click="onShare" v-if="is_share" class="flex justify-end"
			style="background: rgba(0,0,0,.5);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 100000;">
			<image :src="baseUrl + '/static/share3.png'" mode=""
				style="width: 432rpx;height: 280rpx;margin-right: 100rpx;margin-top: 120rpx;"></image>
		</view>
		<view class="cu-modal" :class="modalName == 'ModalAuthor' ? 'show' : ''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-xl text-20"> 请先授权登录 </view>
				<view class="flex justify-between align-center padding text-lg">
					<view @click="hideModal" class="bg-D7D7D7 text-gray radius5" style="padding: 32rpx 96rpx">
						取消
					</view>
					<button v-if="canIUseProfile == false" open-type="getUserInfo" @getuserinfo="getUserInfo"
						class="bg-color text-white radius5" style="padding: 32rpx 96rpx">
						确定
					</button>
					<button v-else @tap="getUserInfo" class="bg-color text-white radius5" style="padding: 32rpx 96rpx">
						确定
					</button>
				</view>
			</view>
		</view>
		<!-- 定位授权 -->
		<view class="cu-modal" :class="modalName == 'ModalAddress' ? 'show' : ''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-xl text-20"> 请先授权地理定位 </view>
				<view class="flex justify-between align-center padding text-lg">
					<view @click="hideModal" class="bg-D7D7D7 text-gray radius5" style="padding: 32rpx 96rpx">
						取消
					</view>
					<button @click="getLocal" class="bg-color text-white radius5" style="padding: 32rpx 96rpx">
						确定
					</button>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="{ show: isShow }">
			<view class="cu-dialog bg-white">
				<view class="cu-bar justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-xl text-20"> 获取用户手机号 </view>
				<view class="flex justify-between align-center padding text-lg">
					<view @click="isShow = false" class="bg-D7D7D7 text-gray radius5" style="padding: 32rpx 96rpx">
						取消
					</view>
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						class="bg-color text-white radius5" style="padding: 32rpx 96rpx">
						确定
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				id: '',
				scrollInToView: '',
				info: {},
				num: 0,
				messageList: [],
				context: '',
				Inter: '',
				is_share: false,
				modalName: null,
				canIUseProfile: false,
				userInfo: {},
				isShow: false,
				session_key: "",
				phoneNumber: "",
				latitude: '',
				longitude: '',
				type: ''
			}
		},
		onShareAppMessage: function(res) {
			this.onShare()
			// if (res.from === 'button') {
			// 来自页面内转发按钮
			// console.log(res)
			// }
			return {
				path: '/filePage/pages/live-detail/live-detail?id=' + this.id + '&type=1'
			}
		},
		onShareTimeline: function() {
			this.onShare()
			return {
				query: '/filePage/pages/live-detail/live-detail?id=' + this.id + '&type=1'
			}
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			if (wx.getUserProfile) {
				console.log("--check getUserProfile--OK");
				this.canIUseProfile = true;
			}
			// #endif
			// console.log(options)
			if (options.type) {

				this.type = options.type
			}
			if (options.id) {

				this.id = options.id
				this.getInfo()
			}
			let that = this
			uni.getLocation({
				type: "gcj02",
				success: function(res) {
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					uni.getStorage({
						key: "userId",
						success: function() {
							that.getUser();
							// if (!that.phoneNumber) {
							// 	that.isShow = true
							// }
						},
						fail: function() {
							that.modalName = "ModalAuthor";
						},
					});
				},
				fail: function(err) {
					that.modalName = "ModalAddress";
				},
			});
		},
		onHide() {
			clearInterval(this.Inter)
		},
		onUnload() {
			clearInterval(this.Inter)
		},
		onShow() {
			let that = this
			uni.getStorage({
				key: "userId",
				success: function() {
					setTimeout(() => {
						that.Inter = setInterval(() => {
							that.getNum()
							that.getMessage()
						}, 3000)
					}, 1500)
				}
			});
		},
		methods: {
			onShare() {
				this.is_share = !this.is_share
			},
			toBack() {
				if (this.type == 1) {
					uni.switchTab({
						url: "/pages/home/home",
					});
				} else {
					uni.navigateBack()
				}

			},
			statechange(e) {
				console.log('live-player code:', e.detail.code)
			},
			error(e) {
				console.error('live-player error:', e.detail)
			},
			async getInfo() {
				let that = this
				const [er, re] = await this.$get(this.$api.live_sysDetail, {
					id: this.id
				})
				if (re) {
					this.info = re.data
					setTimeout(() => {
						that.Inter = setInterval(() => {
							that.getNum()
							that.getMessage()
						}, 3000)
					}, 1500)
				}
			},
			async getNum() {
				const [err, res] = await this.$get(this.$api.live_queryOnline, {
					roomName: this.info.streamName
				})
				if (res) {
					this.num = res.data
				}
				if(err){
					clearInterval(this.Inter)
				}
			},
			async getMessage() {
				const [err, res] = await this.$get(this.$api.interaction_list, {
					roomId: this.id
				})
				if (res) {
					// console.log(res.data)
					this.messageList = res.data
					if (res.data.length > 0) {
						this.scrollInToView = 'item' + this.messageList[this.messageList.length - 1].id
					}
				}
				if(err){
					clearInterval(this.Inter)
				}
			},
			async submitMessage() {
				if (!this.context) return
				const [err, res] = await this.$post(this.$api.interaction_add, {
					roomId: this.id,
					context: this.context,
					nickName: uni.getStorageSync('userInfo').nickname
				})
				if (res) {
					this.context = ''
					this.getMessage()
					// console.log(res)
				}
			},
			async getUserInfo() {
				let that = this;
				if (that.canIUseProfile == false) {
					uni.login({
						provider: "weixin",
						success: function(loginRes) {
							console.log(loginRes);
							uni.getUserInfo({
								provider: "weixin",
								success: function(infoRes) {
									console.log(infoRes);
									that.getLogin(
										loginRes.code,
										res.userInfo.nickName,
										res.userInfo.avatarUrl
									);
								},
							});
						},
					});
				} else {
					console.log(1111);
					uni.getUserProfile({
						desc: "Wexin",
						success: function(res) {
							console.log("wx.getUserProfile=>用户允许了授权");
							console.log(res.userInfo);
							// console.log( res.rawData );
							console.log(res.signature);
							console.log(res.encryptedData);
							console.log(res.iv);
							uni.login({
								provider: "weixin",
								success: function(loginRes) {
									console.log(loginRes);
									that.getLogin(
										loginRes.code,
										res.userInfo.nickName,
										res.userInfo.avatarUrl
									);
								},
							});
						},
						fail(rs) {
							console.log(rs);
						},
					});
				}
			},
			getLocal() {
				let that = this;
				this.modalName = null;
				uni.openSetting({
					success: (re) => {
						if (re.authSetting) {
							uni.getLocation({
								type: "gcj02",
								success: function(res) {
									that.latitude = res.latitude;
									that.longitude = res.longitude;
								},
								fail(err) {
									console.log(err);
								},
							});
						}
					},
					fail: (er) => {
						console.log("``````" + JSON.stringify(er));
					},
				});
			},
			async getLogin(code, nickName, avatarUrl) {
				let that = this;
				if (!this.latitude && !this.longitude) {
					this.modalName = "ModalAddress";
				} else {
					uni.showLoading({
						title: "正在登录",
						mask: true,
					});
					const [err, res] = await this.$post(this.$api.loginWX, {
						code: code,
						nickname: nickName,
						headimg: avatarUrl,
						latitude: this.latitude,
						longitude: this.longitude,
					});
					if (res) {
						// console.log(res)
						this.isShow = true;
						this.session_key = res.data.session_key;
						uni.setStorage({
							key: "session_key",
							data: res.data.session_key,
						});
						uni.setStorage({
							key: "token",
							data: res.data.openid,
						});
						uni.setStorage({
							key: "userId",
							data: res.data.userId,
						});
						this.modalName = null;
						uni.hideLoading();
						this.getUser();
						this.getInfo()
						this.$util.msg(res.message);
					}
				}
			},
			hideModal() {
				this.modalName = null;
			},
			async getUser() {
				const [err, rs] = await this.$get(this.$api.userDetail);
				if (rs) {
					// console.log(rs)
					// this.userInfo = rs.data
					uni.setStorageSync("userInfo", rs.data);
				}
			},
			async getPhoneNumber(e) {
				this.isShow = false;
				console.log(e);
				var iv = e.detail.iv;
				var encryptedData = e.detail.encryptedData;
				var session_key;
				if (uni.getStorageSync("session_key")) {
					session_key = uni.getStorageSync("session_key");
				} else {
					session_key = this.session_key;
				}
				const data = {
					session_key,
					iv,
					encryptedData,
				};
				const [err, rs] = await this.$get(this.$api.getWXPhone, data);
				if (rs) {
					this.$util.msg(rs.message);
					uni.setStorageSync("mobile", rs.data.mobile);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goBack {
		width: 64rpx;
		height: 64rpx;
		position: fixed;
		top: 50rpx;
		left: 20rpx;
		z-index: 99999;
		background: rgba(255, 255, 255, .5);
	}

	.my_header {
		position: fixed;
		top: 50rpx;
		left: 30rpx;
		height: 72rpx;
		background: rgba(#000, .2);
		padding: 10rpx;
		z-index: 99999;

		image {
			width: 64rpx;
			height: 64rpx;
			min-width: 64rpx;
		}
	}

	.refresh {
		width: 72rpx;
		height: 72rpx;
		position: fixed;
		top: 150rpx;
		right: 20rpx;
		z-index: 99999;
	}

	.l_fooder {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999;
	}
</style>
